<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="left-container" style="width: 1000px;">
        <div class="tit">
          <h2>新增订单</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="rules">
          <el-row>
            <el-form-item label="呼叫器 " prop="beeperId">
              <el-select v-model="dataForm.beeperId" @change="handleBeeperChange" clearable>
                <el-option v-for="item in beeperList" :value="item.id" :label="item.name" :key="item.id">

                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <div class="tit" v-if="dataForm.beeperId">
            <h2>服务信息</h2>
          </div>
          <el-row v-if="dataForm.beeperId">
            <el-table :data="dataList" @selection-change="handleSelectionChange">
              <el-table-column align="center" type="selection" label="选择"></el-table-column>
              <el-table-column prop="serverImg" label="服务图片" width="200" align="center">
                <template slot-scope="scope">
                  <div class="img-wrapper">
                    <el-image v-if="scope.row.serverImg" :src="scope.row.serverImg"
                              :preview-src-list="[scope.row.serverImg]"></el-image>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="服务名称" prop="serverName"></el-table-column>
              <el-table-column align="center" label="服务分类" prop="classifyName"></el-table-column>
              <el-table-column align="center" label="商户" prop="businessName"></el-table-column>
              <el-table-column align="center" label="售价" prop="salePrice"></el-table-column>
              <el-table-column align="center" label="数量">
                <template slot-scope="scope">
                  <el-input type="number" v-model.number.trim="scope.row.num"
                            @input="handleNumChange(scope.row)"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <el-form-item>
              <el-button plain type="primary" @click="sureClick">保 存</el-button>
              <el-button plain @click="returnList">取 消</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>

      <div class="right-container" v-if="dataForm.beeperId">
        <el-card class="card">
          <div slot="header">
            <h3>呼叫器基本信息</h3>
          </div>
          <el-row>
            <el-col>
              <div>名称：</div>
              <span>{{beeperInfo.equipName}}</span>
            </el-col>
            <el-col>
              <div>编号：</div>
              <span>{{beeperInfo.equipCode}}</span>
            </el-col>
            <el-col>
              <div>类型：</div>
              <span>{{formatBeeperType(beeperInfo.beeperType)}}-{{$Filters.formatBeeperVersion(beeperInfo.beeperVersion)}}</span>
            </el-col>
            <el-col>
              <div>地址：</div>
              <span>{{address}}</span>
            </el-col>
            <el-col>
              <div>联系人：</div>
              <span>{{beeperInfo.houseLinkName}}</span>
            </el-col>
            <el-col>
              <div>联系电话：</div>
              <span>{{beeperInfo.houseLinkName}}</span>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="card" v-if="remindId&&beeperInfo.disposeResult">
          <div slot="header">
            <h3>处理结果</h3>
          </div>
          <div>
            <span>{{beeperInfo.disposeResult}}</span>
          </div>
        </el-card>
      </div>

    </div>
  </div>
</template>

<script>
  import * as message from "@/constants/message";
  import BeeperApi from '@/api/equip/beeper';
  import OrderApi from "@/api/order/order";
  import ServerMessageApi from "@/api/message/serverMessage";

  export default {
    name: "OrderAdd",
    data() {
      return {
        remindId: "",//从消息页面来订单页面的
        dataForm: {
          beeperId: "",
          btnAndNums: [],
        },
        rules: {
          beeperId: [
            {required: true, message: "请选择呼叫器", trigger: "change"}
          ]
        },
        //呼叫器下拉列表数据
        beeperList: [],
        // 呼叫器基本信息
        beeperInfo: {},
        //表格数据
        dataList: [
          // {beeperBtnId:id,value:value}
        ],

      }
    },
    computed: {
      address() {
        if (!this.beeperInfo.provinceName) return  //这里先直接判断如果没有获取到数据就返回
        if (this.beeperInfo.houseAddress == "待补充") {
          return this.beeperInfo.houseAddress
        } else {
          return `${this.beeperInfo.provinceName}${this.beeperInfo.cityName}${this.beeperInfo.areaName}${this.beeperInfo.streetName ? this.beeperInfo.streetName : ""}${this.beeperInfo.villageName}${this.beeperInfo.houseAddress}`
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.getBeeperList()
        if (this.$route.query.id) {
          this.remindId = Number(this.$route.query.id)
          this.getRemindInfo()
          // this.getBeeperInfo()
          // this.listData()
        }
      },
      keydown(e) {
        if (e.keyCode == 32) {
          e.returnValue = false;
        }
      },
      formatBeeperType(cellValue) {
        if (cellValue === 1) {
          return "公共"
        } else if (cellValue === 2) {
          return "专属"
        }
      },
      // 从消息页面来的就通过remindId来获取信息
      getRemindInfo() {
        // 调用接口之后再调用这两个函数，要先获取beeperId
        ServerMessageApi.serverRemindInfo({id: this.remindId}).then(res => {
          this.dataForm.beeperId = Number(res.data.beeperId)
          BeeperApi.getBeeperInfo({id: this.dataForm.beeperId}).then(res2 => {
            this.beeperInfo = res2.data
            this.$set(this.beeperInfo, "disposeResult", res.data.disposeResult)
          })
          this.listData()
        })
      },
      // 获取一个呼叫器信息
      getBeeperInfo() {
        BeeperApi.getBeeperInfo({id: this.dataForm.beeperId}).then(res => {
          this.beeperInfo = res.data
        })
      },
      // 获取呼叫器列表
      getBeeperList() {
        BeeperApi.beeperList().then(res => {
          this.beeperList = res.data
        })
      },
      // 呼叫器选择改变
      handleBeeperChange() {
        if (this.dataForm.beeperId) {
          this.getBeeperInfo()
          this.listData()
        }

      },
      // 多选
      handleSelectionChange(val) {
        this.dataForm.btnAndNums = val.map(item => ({btnId: item.beeperBtnId, num: item.num}));
      },
      // 改变数量
      handleNumChange(row) {
        if (row.num < 1) {
          this.$message.error("数量不能小于1")
          row.num = 1
        }
      },
      // 获取列表数据
      listData() {
        BeeperApi.beeperBtnList({beeperId: this.dataForm.beeperId}).then(res => {
          this.dataList = res.data
          this.dataList.forEach(item => {
            this.$set(item, "num", 1)
          })
        })
      },
      sureClick() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            if (this.dataForm.btnAndNums.length == 0) {
              this.$message.error("至少选择一条订单")
              return
            }
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                this.addData();
              });
          }
        })
      },
      addData() {
        let param = {
          beeperId: this.dataForm.beeperId,
          btnAndNums: this.dataForm.btnAndNums
        };
        OrderApi.addOrder(param).then(res => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.go(-1)
      }
    },

  }
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add2.scss";
</style>

<style lang="scss" scoped>
  .left-container {
    ::v-deep .el-table__header-wrapper {
      .el-checkbox {
        display: none;
      }

      .has-gutter {
        position: relative;

        &::after {
          position: absolute !important;
          content: "请选择" !important;
          display: block;
          font-size: 14px;
          color: black;
          top: 9px;
          left: 6px;
        }
      }
    }
  }

  .right-container {
    .card {
      margin: 15px 0 20px 0;
      width: 100%;

      .el-row {
        display: flex;
        flex-wrap: wrap;

        .el-col {
          width: 50%;
          display: flex;
          margin: 10px 0;

          div:first-of-type {
            text-align: end;
            width: 30%;
          }

          span {
            width: 70%;
          }
        }
      }
    }
  }

</style>
